<template>
  <div class="form">
    <h2 class="title"></h2>
    <a-divider :style="{ color: '#000' }" />

    <a-form :model="form" :style="{ width: '680px' }">
      <a-form-item
        field="dishId"
        label="菜品id："
        style="margin-bottom: 40px"
      >
        <a-input
          v-model="form.dishId"
          placeholder="请输入菜品id"
          style="width: 400px; background-color: #fff; border-radius: 10px"
          disabled
        />
      </a-form-item>
      <a-form-item
        field="dishName"
        label="菜品名称："
        style="margin-bottom: 40px"
      >
        <a-input
          v-model="form.dishName"
          placeholder="请输入菜名"
          style="width: 400px; background-color: #fff; border-radius: 10px"
        />
      </a-form-item>
      <a-form-item field="dishDescription" label="菜品描述:" style="margin-bottom: 40px">
        <a-input
          v-model="form.dishDescription"
          placeholder="请输入菜品描述"
          style="width: 400px; background-color: #fff; border-radius: 10px"
        />
      </a-form-item>
      <a-form-item field="dishPhoto" label="菜品照片:" style="margin-bottom: 40px">
        <a-input
          v-model="form.dishPhoto"
          placeholder="请输入菜品照片链接"
          style="width: 400px; background-color: #fff; border-radius: 10px"
        />
      </a-form-item>
      <a-form-item field="dishTips" label="菜品小帖士:" style="margin-bottom: 40px">
        <a-input
          v-model="form.dishTips"
          placeholder="请输入菜品小帖士"
          style="width: 400px; background-color: #fff; border-radius: 10px"
        />
      </a-form-item>
      <div class="btn" style="width: 600px">
        <a-button type="primary" class="confirm" @click="confirmFun">修改</a-button>
        <a-button type="dashed" class="cancel" @click="cancelFun">重置</a-button>
      </div>
    </a-form>
    <a-divider :style="{ color: '#000' }" />
  </div>
</template>

<script>
import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import {dishIdChaXun , updateDish} from '../../api/dish';
export default {
  props: {
    teacherlist: { type: Array },
  },
  data() {
    return {
      form: {
        dishId: '',
        dishName: '',
        dishDescription: '',
        dishPhoto: '',
        dishTips: '',
      },
    };
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    return { route, router };
  },
  async mounted() {
    const dishId = this.route.query.dishId;
    if (dishId) {
      try {
        dishIdChaXun(dishId).then((response) => {
          this.form.dishId = response.data.data.dishId;
          this.form.dishName = response.data.data.dishName;
          this.form.dishDescription = response.data.data.dishDescribe
          this.form.dishPhoto = response.data.data.dishPicture;
          this.form.dishTips = response.data.data.dishTip;
        })
      } catch (error) {
        console.error('获取菜品信息失败:', error);
      }
    }
  },
  methods: {
    confirmFun() {
      updateDish({
        dishId: this.form.dishId,
        dishName: this.form.dishName,
        dishDescribe: this.form.dishDescription,
        dishPicture: this.form.dishPhoto,
        dishTip: this.form.dishTips,
      }).then((response) => {
        console.log(response);
        if (response.data.code == 200) {
          this.$message.success('修改成功');
          this.$router.push('/dishes/dishesList');
        } else {
          this.$message.error('修改失败');
        }
      });
      console.log('修改表单数据:', this.form);
    },
    cancelFun() {
      this.form = {
        dishId: '',
        dishName: '',
        dishDescription: '',
        dishPhoto: '',
        dishTips: '',
      };
    },
  },
};
</script>

<style scoped lang="less">
.form {
  background-color: white;
}
.title {
  margin-left: 50px;
}
.btn {
  margin-left: 250px;
  .cancel {
    margin-left: 20px;
  }
}
.form {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  width: 600px;
  height: 480px;
}
a-form-item {
  margin-bottom: 20px;
}
</style>